<template>
    <div>
        <div v-show="showIframe" class="iframe" v-clickoutside="closeIframe">
            <div class="left">

            </div>
            <div class="right-out">
                <div class="right-in">

                </div>
            </div>
            <div class="right-img">

            </div>
        </div>
    </div>
</template>
<script>
import WOW from "wow.js";
import  clickoutside from "../../assets/directives/clickoutside.js"
export default {
    name:"P11",
    created() {
        new WOW().init();
    },
    mounted() {
        document.addEventListener("keyup", this.changePage);
    },
    data() {
        return {
          showIframe: false,  
        }
    },
    directives: { clickoutside },
    methods: {
        init(){
            this.showIframe = true;
        },
        closeIframe(e){
            this.showIframe = false;
            e.stopPropagation();
        }
    }
}
</script>
<style lang="scss" scoped>
.iframe {
  width: 1935px;
  height: 950px;
  z-index: 999;
  top:90px;
  left:500px;
  background: url("../../assets/images/pptScreen/pFirst/13-2.png") repeat-x;;
  position: relative;
  display: flex;
}
.left{
    width: 629px;
    height: 664px;
    background: url("../../assets/images/pptScreen/pFirst/13-6.png");
    position: absolute;
    left: 119px;
    top: 149px;
}
.right-out{
    width: 762px;
    height: 702px;
    position: absolute;
    top: 143px;
    left: 1071px;
    overflow: hidden;
    animation: left-move3 3s linear 3s forwards;
}
.right-in{
    width: 762px;
    height: 702px;
    background: url("../../assets/images/pptScreen/pFirst/13-7.png");
    position: absolute;
    left: -762px;
    animation: left-move1 2s linear 1s forwards;
}
.right-img{
    width: 762px;
    height: 697px;
    background: url("../../assets/images/pptScreen/pFirst/13-8.png");
    position: absolute;
    top: 143px;
    left: 1071px;
    opacity: 0;
    animation: left-move2 3s linear 3s forwards;
}
@keyframes left-move1 {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(762px);
  }
}
@keyframes left-move2 {
  0% {
    opacity: 0;
  }
  25%{
    opacity: .25;
  }
  50%{
    opacity: .5;
  }
  75%{
    opacity: .75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes left-move3 {
  0% {
    opacity: 1;
  }
  25%{
    opacity: .75;
  }
  50%{
    opacity: .5;
  }
  75%{
    opacity: .25;
  }
  100% {
    opacity: 0;
  }
}
</style>
